import React from 'react';
import { observer } from 'mobx-react';
import {Button,Spin} from 'antd';
import jQuery from 'jquery';
import {WeaRightMenu,WeaLocaleProvider,WeaTools} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
export interface ListProps {
    //batchPrintStore: BatchPrintStore;  } from 'ecCom';
    batchPrintStore: {
        billid: string,
        modeid: string,
        formid: string,
        getWindowTitle:Function,
        windowTitle:string;
    };
    location?: any;
    params?: any;
  }
/*
*批量打印页面
*/
@observer
export class BatchPrint extends React.Component<ListProps, any>{
    constructor(props){
        super(props);
        this.state ={
            spinloading :true
        }
    }
    //页面完成后，给iframe赋予高度，并显示打印按钮与方法
    componentDidMount() {
        let time = 6000;     //页面加载的时间
        const{ location} = this.props;
        let search = location.search;
        let split = search.split("&");
        let modeid = split[0].split("=")[1];
        let formid = split[2].split("=")[1];
        let billids = split[3].split("=")[1];
        let billid = billids.split(",");      //获取到的数据的ID
        if(billid.length>5 && billid < 11){
           time = 10000;
        }else if(billid.length>11){
            time = 15000;
        }
        let isDisp = 0;
        let self = this
        jQuery(".batch-topDiv").css("display","block");
            billid.length > 0 && billid.map(item =>{
                const iframeObj = jQuery("iframe#cube_"+item);
                const src = `/spa/cube/index.jsp#/main/cube/card?type=4&modeId=${modeid}&formId=${formid}&billid=${item}&isbatchprint=1`;
                iframeObj.prop("src",src);
                iframeObj.load(function(){                             //  等iframe加载完毕
                    iframeObj.contents().find('body').prop('class','batchPrint');
                    setTimeout(() =>{
                        jQuery("iframe#cube_"+item).css("height",jQuery("iframe#cube_"+item).contents().find('.cube-card-wrap').height()+30);
                        isDisp++;
                        if(isDisp == billid.length){
                            let windowTitle = split[4].split("=")[1];
                            windowTitle = WeaTools.Base64.decode(windowTitle);
                            if(windowTitle != ''){
                                document.title = windowTitle;
                            }
                            jQuery('#buttonPri').removeAttr("disabled");                          //增加按钮方法与显示
                            billid.length > 0 && billid.map(item =>{ 
                                jQuery("iframe#cube_"+item).css("height",jQuery("iframe#cube_"+item).contents().find('.cube-card-wrap').height()+30);
                            });
                            jQuery('#buttonPri').attr('onclick','').click(()=>{
                                jQuery(".batch-topDiv").css("display","none");
                                setTimeout(() =>{
                                    window.print();
                                    jQuery(".batch-topDiv").css("display","block");
                                },300)
                            });

                        }
                        self.setState({spinloading:false})
                    },time)
                });
                iframeObj.ready(function(){                         //由于iframe在这种获取的模式中，有时候无法获取iframe中的dom，所以增加ready与setInterval的方式来获取。
                    setTimeout(() =>{
                        const hnd = setInterval(() =>{              //延迟0.2秒，担心获取不到setInterval()中。
                            const hight = iframeObj.contents().find('.cube-card-wrap').click().outerHeight()+10;
                            const height = iframeObj.contents().find('.cube-card-wrap').click().height();
                            iframeObj.css("height", hight > height ? hight+50 : height+50);
                        });
                        clearInterval(hnd);
                    },200)

                });
            });
        const by = document.querySelector("body");
        if(by){
            by.className +=by.className+" printBody";
        }
    }


    render(){
        const{ location} = this.props
        let search = location.search;
        let split = search.split("&");
        let windowTitle = split[4].split("=")[1];
        windowTitle = WeaTools.Base64.decode(windowTitle);
        if(windowTitle != ''){
            document.title = windowTitle;
        }
        let billids = split[3].split("=")[1];
        let billid = billids.split(",");
        return (
            <div className="cube-batch-print">
                <Spin size='large' spinning={this.state.spinloading}>
                    <div className = 'batch-topDiv' style = {{position:'fixed',zIndex:99999,right:'50px',top:'10px'}}>
                        <Button id='buttonPri' type='primary' disabled={'disabled'}>{getLabel(502295, "打印")}</Button>
                    </div>
                    <WeaRightMenu style={{paddingTop: '20px'}}>
                        <div> 
                        {
                            billid.length > 0 && billid.map(item =>{
                                return <div className="cube-batch-print-item" style={{pageBreakBefore:"always"}}>
                                    <iframe id={"cube_"+item} name={"cubename_"+item} style={{border:0,width:'100%', height:'100%'}} ></iframe>
                                </div>
                            })
                        }
                        </div>
                    </WeaRightMenu>
                </Spin>
            </div>

        )
    }
    //右键按钮在iframe中有bug，暂时不用
    // getRightMenus = () => {
    //     let btns:any = [];
    //     btns.push({
    //         icon: <i className='icon-coms-Print ' />,
    //         content: "打1111印",
    //         key: '1',
    //         onClick:(key)=>setTimeout(()=>{
    //             window.print()
    //         },100)
    //     })
    //     return btns
    // }
}

